///////////////////////////////////////////////////////////////////////////////////////////
//
// This code draws labels on the map
//
// This code is not part of the MapBlog code distribution but it is used by the MapBlog
//
// The code is based on example code from the Google Maps API documentation
// See Map Overlays - http://code.google.com/apis/maps/documentation/overlays.html#Overlays_overview
// retrieved on 5/23/08
// 
// Use of this code is in accordance with Google's licensing of example code
///////////////////////////////////////////////////////////////////////////////////////////


////////////////////////////////////////////////////////////////////////////////////////////
// A Rectangle is a simple overlay that outlines a lat/lng bounds on the
// map. It has a border of the given weight and color and can optionally
// have a semi-transparent background color.
function Rectangle(bounds, opt_weight, opt_color) {
	this.bounds_ = bounds;
	this.weight_ = 0;
	this.color_ = opt_color || "#FDF7EE";
}


////////////////////////////////////////////////////////////////////////////////////////////
function makebox(where,thelabel) {
	Rectangle.prototype = new GOverlay();

	// Creates the DIV representing this rectangle.
	Rectangle.prototype.initialize = function(map) {
		// Create the DIV representing our rectangle
		var div = document.createElement("div");
		div.style.border = this.weight_ + "px solid " + this.color_;
		div.style.position = "absolute";
		div.style.color="#AAAAAA";
		div.align="center";
		
		// change the style of this div to set the label style 
		div.innerHTML = "<span style='color:#FF0000;font-family:Tahoma, Verdana, Arial, Helvetica,sans-serif;font-size:10pt;font-weight:bold;'>" 
		+ thelabel + "</span>";
	
		// Our rectangle is flat against the map, so we add our selves to the
		// MAP_PANE pane, which is at the same z-index as the map itself (i.e.,
		// below the marker shadows)
		map.getPane(G_MAP_MAP_PANE).appendChild(div);
	
		this.map_ = map;
		this.div_ = div;
	}



	// Remove the main DIV from the map pane
	Rectangle.prototype.remove = function() {
		this.div_.parentNode.removeChild(this.div_);
	}

	// Copy our data to a new Rectangle
	Rectangle.prototype.copy = function() {
		return new Rectangle(this.bounds_, this.weight_, this.color_, this.backgroundColor_, this.opacity_);
	}


	// Redraw the rectangle based on the current projection and zoom level
	Rectangle.prototype.redraw = function(force) {
	// We only need to redraw if the coordinate system has changed
	
		var label_pos = "top_left";
		if (label_pos == "top_right") {
			label_pos_top = 20;
			label_pos_left = -40;
		} else if (label_pos == "top_left") {
			label_pos_top = -100;
			label_pos_left = -48;
		};
	
		if (!force) return;
		
		// Calculate the DIV coordinates of two opposite corners of our bounds to
		// get the size and position of our rectangle
		var c1 = this.map_.fromLatLngToDivPixel(this.bounds_.getSouthWest());
		var c2 = this.map_.fromLatLngToDivPixel(this.bounds_.getNorthEast());

		// Now position our DIV based on the DIV coordinates of our bounds
		//  this.div_.style.width = Math.abs(c2.x - c1.x) + "px";
		this.div_.style.width = "240" + "px";
		//this.div_.style.padding = "1px 1px 1px 1px";
	
		//  this.div_.style.height = Math.abs(c2.y - c1.y) + "px";
		this.div_.style.height = "14" + "px";
		//this.div_.style.left = (Math.min(c2.x, c1.x) - this.weight_) + "px";
		
		
		this.div_.style.left = (Math.min(c2.x, c1.x) + label_pos_top) + "px";
	
		// this.div_.style.left = "20" + "px";

		//this.div_.style.top = (Math.min(c2.y, c1.y) - this.weight_) + "px";
		this.div_.style.top = (Math.min(c2.y, c1.y) + label_pos_left) + "px";

		
		//this.div_.style.top = (Math.min(c2.y, c1.y)) + "px";
		// this.div_.style.top = "20" + "px";
	}

	// Display a rectangle in the center of the map at about a quarter of
	// the size of the main map
	var bounds = map.getBounds();
	
	// not used
	//var southWest = bounds.getSouthWest();
	var southWest = where;
	
	//var northEast = bounds.getNorthEast();
	var northEast = where;
	
	var rectBounds = new GLatLngBounds(
		new GLatLng(southWest.lat(), southWest.lng()),
		new GLatLng(northEast.lat(), northEast.lng()));

	map.addOverlay(new Rectangle(rectBounds));
	
}

